<template>
	<view class="register">
		<view class="img-a">
			<view class="t-b">
				您好,
				<br />
				<!-- #ifndef APP-PLUS -->
				欢迎使用，友星缘小程序
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				欢迎使用，友星缘APP
				<!-- #endif -->
			</view>
		</view>
		<view class="register-view">
			<view class="t-register">
				<uni-forms class="cl" :modelValue="dataForm" :rules="rules" validate-trigger="bind">
					<!-- #ifdef MP-WEIXIN -->
					<uni-forms-item name="avatarUrl">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">头像</text>
						</view>
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="dataForm.headImage" v-if="dataForm.headImage"></image>
							<image class="avatar" :src="avatarUrl" v-else></image>
						</button>
						<!-- <image v-if="dataForm.avatarUrl" :src="dataForm.avatarUrl" mode="aspectFit" class="avr-img"></image>
						<view class="avatar" @tap="getUserProfile" v-else>
							<svg-icon icon="camera-1" :width="40"></svg-icon>
							<text>上传头像</text>
						</view> -->
					</uni-forms-item>
					<!-- #endif -->
					<uni-forms-item name="nickName">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">昵称</text>
						</view>
						<uni-easyinput type="text" :inputBorder="false" v-model="dataForm.nickName" placeholder="例如:张晨"
							prefix-icon="contact" maxlength="15" />
					</uni-forms-item>
					<uni-forms-item name="userName">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">手机号</text>
						</view>
						<uni-easyinput type="number" maxlength="11" :inputBorder="false" v-model="dataForm.userName"
							placeholder="请输入手机号" prefix-icon="person" />
					</uni-forms-item>
					<uni-forms-item name="userName">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">验证码</text>
						</view>
						<view class="verification-content">
							<uni-easyinput type="number" maxlength="6" placeholder="请输入验证码" :inputBorder="false"
								v-model="dataForm.verificationCode" />
							<button @click="getcode" class="btn-submit" :disabled="forbidden">{{getCodeText}}</button>
						</view>
					</uni-forms-item>
					<uni-forms-item name="password">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">密码</text>
						</view>
						<uni-easyinput type="password" :inputBorder="false" v-model="dataForm.password"
							placeholder="请输入6-12位英文或数字" prefix-icon="locked" maxlength="12" />
					</uni-forms-item>
					<uni-forms-item name="corfirmPassword">
						<view style="margin-bottom: 40rpx;">
							<text class="txt">确认密码</text>
						</view>
						<uni-easyinput type="password" :inputBorder="false" v-model="dataForm.corfirmPassword"
							placeholder="请重新输入密码" prefix-icon="locked-filled" maxlength="12" />
					</uni-forms-item>

					<view class="privacy">
						<radio value="r1" :checked="dataForm.checked" @click="changeCheck" color="#0079ff" />同意
						<navigator class="nav-privacy" url="/pageSubOne/agree/privacy/privacy">
							《隐私协议》
						</navigator>
						<navigator class="nav-privacy" url="/pageSubOne/agree/user/user">
							《用户协议》
						</navigator>
					</view>

					<view style="padding-top: 40rpx;padding-bottom: 24rpx;">
						<button class="btn-submit" @click="submit" type="warn">注册并登陆</button>
						<navigator class="reg" url="/pageSubOne/login/login">返回登陆页</navigator>
					</view>

				</uni-forms>
				<!-- <navigator class="nav-login" url="/pageSubOne/login/login">
					返回登陆页面
				</navigator> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				forbidden: false,
				getCodeText: "获取验证码",
				visible: false,
				hometown: "",
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				dataForm: {
					userName: '',
					nickName: '',
					password: '',
					// headImage: '',
					corfirmPassword: '',
					// hometown: [],
					verificationCode: '',
					checked: false,
				},
				rules: {
					userName: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}]
					},
					nickName: {
						rules: [{
								required: true,
								errorMessage: '请输入昵称',
							},
							{
								minLength: 2,
								maxLength: 15,
								errorMessage: '昵称长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					},
					corfirmPassword: {
						rules: [{
							required: true,
							errorMessage: '请输入确认密码',
						}]
					},
				}
			}
		},
		methods: {
			getcode() {
				const regex = /^1[3456789]\d{9}$/;
				if (regex.test(this.dataForm.userName)) {
					this.$http({
						url: '/sendCode?phone=' + this.dataForm.userName,
						method: 'get'
					}).then(() => {
						uni.showToast({
							title: "验证码已发送！",
							icon: 'none'
						})
						this.setTimer()
					})
				} else {
					uni.showToast({
						title: "请输入正确的手机号！",
						icon: 'none'
					})
					return;
				}

			},
			changeCheck() {
				this.dataForm.checked = !this.dataForm.checked
			},
			setTimer() {
				this.forbidden = true
				let holdTime = 60;
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.forbidden = false;
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				this.dataForm.headImage = avatarUrl
			},
			getUserProfile() {
				uni.getUserProfile({
					desc: '用于展示用户头像', // 声明用途
					success: (res) => {
						console.log('用户信息:', res.userInfo);
						this.dataForm.avatarUrl = res.userInfo.avatarUrl; // 获取头像 URL
					},
					fail: (err) => {
						console.error('获取用户信息失败:', err);
					}
				});
			},
			submit() {
				if (this.dataForm.userName == "" ||
					this.dataForm.nickName == "" ||
					this.dataForm.password == "" ||
					this.dataForm.verificationCode == "") {
					uni.showToast({
						title: "昵称,手机号,验证码或密码不能为空",
						icon: 'none'
					})
					return;
				}
				if (this.dataForm.corfirmPassword != this.dataForm.password) {
					uni.showToast({
						title: "密码不一致，请重新输入",
						icon: 'none'
					})
					return;
				}
				if (this.dataForm.checked) {
					this.$http({
						url: '/register',
						data: this.dataForm,
						method: 'POST'
					}).then(() => {
						uni.showToast({
							title: "注册成功,您已成为友星缘的用户",
							icon: 'none'
						})
						this.login();
					})
				} else {
					uni.showToast({
						title: "请先同意协议",
						icon: "error"
					})
				}

			},
			login() {
				const loginForm = {
					terminal: this.$enums.TERMINAL_TYPE.APP,
					userName: this.dataForm.userName,
					password: this.dataForm.password
				}
				this.$http({
					url: '/login',
					data: loginForm,
					method: 'POST'
				}).then((loginInfo) => {
					console.log("登录成功,自动跳转到聊天页面...")
					uni.setStorageSync("userName", loginForm.userName);
					uni.setStorageSync("password", loginForm.password);
					uni.setStorageSync("loginInfo", loginInfo);
					// 调用App.vue的初始化方法
					// #ifndef APP-PLUS
					getApp().init()
					// #endif
					// #ifdef APP-PLUS
					getApp().$vm.init()
					// #endif
					// 跳转到聊天页面   
					uni.switchTab({
						url: "/pages/tabbar/chat"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/styles/variables.scss';

	.register {
		height: 100vh;
		background: #fff;

		.img-a {
			width: 100%;
			height: 450rpx;
			background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
			background-size: 100%;
		}

		.t-b {
			text-align: left;
			font-size: 42rpx;
			color: #ffffff;
			padding: 130rpx 0 0 70rpx;
			font-weight: bold;
			line-height: 70rpx;
		}

		.register-view {
			width: 100%;
			position: relative;
			margin-top: -120rpx;
			background-color: #ffffff;
			border-radius: 64rpx 64rpx 0% 0;

			.t-register {
				width: 600rpx;
				margin: 0 auto;
				font-size: 28rpx;
				padding-top: 100rpx;

				.privacy {
					width: 100%;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: 30rpx;
				}

				.nav-privacy {
					color: #2796f2;
				}

			}

			uni-button:after {
				border: none !important;
			}

			button::after {
				border: none !important;
			}

			.avatar-wrapper {
				background-color: transparent;
				border: none;
				height: 150rpx;

				.avatar {
					width: 150rpx;
					height: 150rpx;
					border-radius: 8rpx;
				}
			}

			.avr-img {
				width: 150rpx;
				height: 150rpx;
				border-radius: 12rpx;
			}

			// .avatar {
			// 	display: flex;
			// 	flex-direction: column;
			// 	justify-content: center;
			// 	align-items: center;
			// 	width: 150rpx;
			// 	height: 150rpx;
			// 	gap: 8rpx;
			// 	border-radius: 16rpx;
			// 	background-color: #eeeeee;
			// }

			.btn-submit {
				font-size: 28rpx;
				background: #2796f2;
				color: #fff;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				font-weight: bold;
			}

			.reg {
				font-size: 28rpx;
				color: #fff;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 50rpx;
				font-weight: bold;
				background: #f5f6fa;
				color: #000000;
				text-align: center;
				margin-top: 30rpx;
			}

			.cl {
				zoom: 1;
			}

			.cl:after {
				clear: both;
				display: block;
				visibility: hidden;
				height: 0;
				content: '\20';
			}

			::v-deep .uni-easyinput {
				border-bottom: 1px solid #eee;
			}
		}

		.txt {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}

		.title {
			font-size: 25px;
			font-weight: bold;
			color: $color-black;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 20px;
			gap: 10px;
		}

		.form {
			padding: 20rpx;
		}

		.nav-login {
			position: fixed;
			width: 100%;
			bottom: 100rpx;
			color: royalblue;
			text-align: center;
			font-size: 32rpx;
		}

		.verification-content {
			display: flex;
			align-items: center;
			// border: 1px solid red;
		}
	}
</style>